<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>个人网站| web设计</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="alternate icon" type="image/png" href="assets/i/favicon.png">
  <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
  <style>
    .get {
      background: #1E5B94;
      color: #fff;
      text-align: center;
      padding: 100px 0;
    }

    .get-title {
      font-size: 200%;
      border: 2px solid #fff;
      padding: 20px;
      display: inline-block;
    }

    .get-btn {
      background: #fff;
    }

    .detail {
      background: #fff;
    }

    .detail-h2 {
      text-align: center;
      font-size: 150%;
      margin: 40px 0;
    }

    .detail-h3 {
      color: #1f8dd6;
    }

    .detail-p {
      color: #7f8c8d;
    }

    .detail-mb {
      margin-bottom: 30px;
    }

    .hope {
      background: #0bb59b;
      padding: 50px 0;
    }

    .hope-img {
      text-align: center;
    }

    .hope-hr {
      border-color: #149C88;
    }

    .hope-title {
      font-size: 140%;
    }

    .about {
      background: #fff;
      padding: 40px 0;
      color: #7f8c8d;
    }

    .about-color {
      color: #34495e;
    }

    .about-title {
      font-size: 180%;
      padding: 30px 0 50px 0;
      text-align: center;
    }

    .footer p {
      color: #7f8c8d;
      margin: 0;
      padding: 15px 0;
      text-align: center;
      background: #2d3e50;
    }
  </style>
  
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
  <script>
  $(function() {
    var $dropdown = $('#doc-dropdown-js'),
        data = $dropdown.data('amui.dropdown');
    $('#doc-dropdown-toggle').on('click', function(e) {
      $dropdown.dropdown('toggle');
      return false;
    });

    $('#doc-dropdown-open').on('click', function(e) {
      data.active ? alert('已经打开了，施主又何必再纠缠呢！') : $dropdown.dropdown('open');
      return false;
    });

    $('#doc-dropdown-close').on('click', function(e) {
      data.active ? $dropdown.dropdown('close') : alert('没有开哪有关，没有失哪有得！');
      return false;
    });

    $dropdown.on('open.dropdown.amui', function (e) {
      console.log('open event triggered');
    });
  });
</script>
</head>
<body>
<header class="am-topbar am-topbar-fixed-top">
  <div class="am-container">
    <h1 class="am-topbar-brand">
      <a href="#">格凌世家</a>
    </h1>

    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-secondary am-show-sm-only"
            data-am-collapse="{target: '#collapse-head'}"><span class="am-sr-only">导航切换</span> <span
        class="am-icon-bars"></span></button>

    <div class="am-collapse am-topbar-collapse" id="collapse-head">
      <ul class="am-nav am-nav-pills am-topbar-nav">
        <li class="am-active"><a href="#">首页</a></li>
        <li><a href="#">项目</a></li>
        <li class="am-dropdown" data-am-dropdown>
          <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
            网站建设 <span class="am-icon-caret-down"></span>
          </a>
          <ul class="am-dropdown-content">
            <li class="am-dropdown-header">请选择</li>
            <li><a href="#">1. 静态页面</a></li>
            <li><a href="#">2. 个人博客</a></li>
            <li><a href="#">3. 商品展示</a></li>
            <li><a href="#">4. 获取二级域名</a></li>
          </ul>
        </li>
      </ul>

      <div class="am-topbar-right">
        <a href="login.html"><button class="am-btn am-btn-secondary am-topbar-btn am-btn-sm"><span class="am-icon-pencil"></span> 注册</button></a>
      </div>

      <div class="am-topbar-right">
        <a href="login.html"><button class="am-btn am-btn-primary am-topbar-btn am-btn-sm"><span class="am-icon-user"></span> 登录</button></a>
      </div>
    </div>
  </div>
</header>

<div class="get">
  <div class="am-g">
    <div class="am-u-lg-12"> 
      <h1 class="get-title">&nbsp;&nbsp;&nbsp;&nbsp;格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;凌&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;世&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家&nbsp;&nbsp;&nbsp;&nbsp;</h1>

      <p>
        即时个人博客管理系统
      </p>

      <p>
        <a href="http://sz.workit.top/" class="am-btn am-btn-sm get-btn">获取个人网站√</a>
      </p>
    </div>
  </div>
</div>

<div class="detail">
  <div class="am-g am-container">
    <div class="am-u-lg-12">
      <h2 class="detail-h2">项目规划 、产品展示，让更多的人懂我们!</h2>

      <div class="am-g">
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">

          <h3 class="detail-h3">
            <i class="am-icon-money am-icon-sm"></i>
            免费
          </h3>

          <p class="detail-p">
            格凌世家本着服务大众的理念，提供免费的网站建设服务。
          </p>
        </div>
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">
          <h3 class="detail-h3">
            <i class="am-icon-cogs am-icon-sm"></i>
            组件丰富，模板精美
          </h3>

          <p class="detail-p">
            格凌世家 含近 200 个 网站模板、10 个 JS 组件，更有 17 款包含近 60 个主题的 Widgets，可快速构建界面出色、体验优秀的跨屏页面，极大的优化用户体验。
          </p>
        </div>
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">
          <h3 class="detail-h3">
            <i class="am-icon-check-square-o am-icon-sm"></i>
            本地化支持
          </h3>

          <p class="detail-p">
            相比国外的前端框架，Amaze UI 专注解决中文排版优化问题，根据操作系统调整字体，实现最佳中文排版效果；针对国内主流浏览器及 App 内置浏览器提供更好的兼容性支持，免去您对兼容性的担忧。
          </p>
        </div>
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">
          <h3 class="detail-h3">
            <i class="am-icon-send-o am-icon-sm"></i>
            轻量级，高性能
          </h3>

          <p class="detail-p">
            格凌世家后端使用jfinal框架，前端使用amaze UI框架，响应迅速，自适应移动端。
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="hope">
  <div class="am-g am-container">
    <div class="am-u-lg-4 am-u-md-6 am-u-sm-12 hope-img">
      <img src="assets/i/examples/landing.png" alt="" data-am-scrollspy="{animation:'slide-left', repeat: false}">
      <hr class="am-article-divider am-show-sm-only hope-hr">
    </div>
    <div class="am-u-lg-8 am-u-md-6 am-u-sm-12">
      <h2 class="hope-title">同我们一起打造你的知识乐园</h2>

      <p>
        在知识爆炸的年代，我们不愿成为知识的过客，我们要改变世界，我们要做新时代的开创者！
      </p>
    </div>
  </div>
</div>

<div class="about">
  <div class="am-g am-container">
    <div class="am-u-lg-12">
      <h2 class="about-title about-color">格凌世家 &nbsp;崇尚开放、自由，非常欢迎大家的参与</h2>

      <div class="am-g">
        <div class="am-u-lg-6 am-u-md-4 am-u-sm-12">
          <form class="am-form">
            <label for="name" class="about-color">你的姓名</label>
            <input id="name" type="text">
            <br/>
            <label for="email" class="about-color">你的邮箱</label>
            <input id="email" type="email">
            <br/>
            <label for="message" class="about-color">你的留言</label>
            <textarea id="message"></textarea>
            <br/>
            <button type="submit" class="am-btn am-btn-primary am-btn-sm"><i class="am-icon-check"></i> 提 交</button>
          </form>
          <hr class="am-article-divider am-show-sm-only">
        </div>

        <div class="am-u-lg-6 am-u-md-8 am-u-sm-12">
          <h4 class="about-color">关于我们</h4>

          <p>格凌世家（沃克IT工作小组）
            2015年5月成立于湖南文理学院工作室，小组成立目的是将我们获取的知识回馈社会。</p>
          <h4 class="about-color">团队介绍</h4>

          <p>沃克IT工作小组获得了常德市创投孵化器的支持，其高效的网站建设能力已得到全市多家企业及机构的认可与信赖，客户包括企业、常德市政府、国内政府机关。</p>
        </div>
      </div>
    </div>
  </div>
</div>

<footer class="footer">
  <p>© 2018 <a href="http://sz.workit.top" target="_blank">格凌世家</a><a
      href="http://sz.workit.top" target="_blank"></a></p>
</footer>

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

</body>
</html>
